<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-form-item label="审批状态">
                        <el-select clearable v-model="searchForm.auditState" placeholder="审批状态">
                            <el-option key="0" label="未审批" value="0"></el-option>
                            <el-option key="1" label="已通过" value="1"></el-option>
                            <el-option key="2" label="未通过" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="initTableData(1)">搜索</el-button>
                        <el-button @click="resetSearchForm">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>


        <!-- 新增|刷新 -->
        <div class="flex items-center justify-between mb-4">
            <el-tooltip effect="dark" content="刷新数据" placement="top">
                <el-button text @click="initTableData">
                    <el-icon :size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-tooltip>
        </div>

        <!-- 表格数据 -->
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">

            <el-table-column label="申请提交人" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.applyUserName }}
                </template>
            </el-table-column>

            <el-table-column label="申请证书名称" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.certName }}
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template #default="{ row }">
                    {{ dateFormatter(row.createTime) }}
                </template>
            </el-table-column>

            <el-table-column label="审批状态" align="center">
                <template #default="{ row }">
                    {{ changeState(row.auditState) }}

                </template>
            </el-table-column>

            <el-table-column label="审批时间" align="center">
                <template #default="{ row }">
                    {{ dateFormatter(row.auditTime) }}
                </template>
            </el-table-column>

            <el-table-column label="驳回理由" align="center">
                <template #default="{ row }">
                    {{ row.auditRemark }}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <div>
                        <el-button type="primary" size="small" text @click="showDetails(scope.row)">详情</el-button>
                        <el-button type="primary" size="small" text v-if="scope.row.auditState == 0"
                            @click="applyCert(scope.row)">审核</el-button>
                        <el-button type="primary" size="small" text disabled v-else
                            @click="applyCert(scope.row)">已审</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="initTableData" />
        </div>
    </el-card>

    <!-- 申请详情 -->
    <SystemDialog title="申请详情" :visible="dialogTableVisible_apply" :height="50" :width="50" :showOkBtn="false"
        @on-close="dialogTableVisible_apply = false" @on-confirm="dialogTableVisible_apply = false">
        <template v-slot:content>
            <div style="padding: 10px;display: flex;justify-content: space-around;">
                <el-form label-width="150px" :inline="false">
                    <span style="font-size: 15px;">个人信息：</span>
                    <el-form-item label="国籍：">
                        <span>{{ detailForm.nationality }}</span>
                    </el-form-item>

                    <el-form-item label="姓名：">
                        <span>{{ detailForm.realName }}</span>
                    </el-form-item>

                    <el-form-item label="电话：">
                        <span>{{ detailForm.phone }}</span>
                    </el-form-item>

                    <el-form-item label="邮箱：">
                        <span>{{ detailForm.email }}</span>
                    </el-form-item>

                    <el-form-item label="培训时间：">
                        <span>{{ dateFormatterDay(detailForm.trainTime) }}</span>
                    </el-form-item>

                    <el-form-item label="身份证：" v-if="detailForm.nationality == '中国'">
                        <span>{{ detailForm.idCard }}</span>
                    </el-form-item>

                    <el-form-item label="护照：" v-else>
                        <span>{{ detailForm.idCard }}</span>
                    </el-form-item>

                    <el-form-item label="证件照：">
                        <el-image style="width: 100px; height: 100px" :src="detailForm.idPhoto"
                            :preview-src-list="detailForm.srcList">
                        </el-image>
                    </el-form-item>
                </el-form>
                <el-form label-width="150px" :inline="false">
                    <span style="font-size: 15px;">公司信息：</span>
                    <el-form-item label="公司名称：">
                        <span>{{ detailForm.companyName }}</span>
                    </el-form-item>

                    <el-form-item label="公司地址：">
                        <span>{{ detailForm.companyAddress }}</span>
                    </el-form-item>

                    <el-form-item label="公司官网：">
                        <span>{{ detailForm.companyOfficialWebsite }}</span>
                    </el-form-item>

                    <el-form-item label="公司联系人：">
                        <span>{{ detailForm.companyManager }}</span>
                    </el-form-item>

                    <el-form-item label="公司联系人电话：">
                        <span>{{ detailForm.companyManagerPhone }}</span>
                    </el-form-item>

                    <el-form-item label="公司联系人邮箱：">
                        <span>{{ detailForm.companyManagerEmail }}</span>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </SystemDialog>

    <!-- 审核弹窗 -->
    <SystemDialog title="审批" :visible="dialogTableVisible_audit" :height="30" :width="30"
        @on-close="dialogTableVisible_audit = false" @on-confirm="submitApplyCert">
        <template v-slot:content>
            <div style="padding: 20px;">
                <el-form label-width="120px" :inline="false">
                    <el-form-item label="审批结果：">
                        <el-select v-model="auditForm.auditState" placeholder="审批结果">
                            <el-option key="1" label="通过" value="1"></el-option>
                            <el-option key="2" label="驳回" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="培训地点：" v-if="auditForm.auditState == 1">
                        <el-input placeholder="培训地点" v-model="auditForm.trainAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="所属区域：" v-if="auditForm.auditState == 1">
                        <el-input placeholder="所属区域" v-model="auditForm.certArea"></el-input>
                    </el-form-item>

                    <el-form-item label="技能1：" v-if="auditForm.auditState == 1 && auditForm.templateType == '1'">
                        <el-input placeholder="技能1" v-model="auditForm.auditTechnical1"></el-input>
                    </el-form-item>

                    <el-form-item label="技能2：" v-if="auditForm.auditState == 1 && auditForm.templateType == '1'">
                        <el-input placeholder="技能2" v-model="auditForm.auditTechnical2"></el-input>
                    </el-form-item>

                    <el-form-item label="证书类型：" v-if="auditForm.auditState == 1 && auditForm.templateType == '1'">
                        <el-input placeholder="证书类型" v-model="auditForm.auditModels"></el-input>
                    </el-form-item>

                    <el-form-item label="驳回原因：" v-if="auditForm.auditState == 2">
                        <el-input type="textarea" :rows="4" placeholder="驳回原因"
                            v-model="auditForm.auditRemark"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </SystemDialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import SystemDialog from "~/components/SystemDialog.vue";
import { toast, toastWarn } from "~/composables/util"
import { dateFormatter, dateFormatterDay } from '~/utils/common.js'
import { api_cert_apply_list, api_cert_apply_audit } from "~/api/exam/certApi";

// 表格分页数据
const tableData = ref([])
const loading = ref(false)
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)

// 申请详情弹窗
const dialogTableVisible_apply = ref(false)

// 申请审核弹窗
const dialogTableVisible_audit = ref(false)

// 查询条件
const searchForm = reactive({
    auditState: null,
    page: currentPage.value,
    size: limit.value,
})
// 重置搜索框
const resetSearchForm = () => {
    searchForm.auditState = null
    initTableData(1)
}

// 详情form
const detailForm = ref(null)

// 审批表单
const auditForm = reactive({
    id: null,
    auditState: "1",
    trainAddress: null,
    certArea: null,
    auditTechnical1: null,
    auditTechnical2: null,
    auditModels: null,
    auditRemark: null
})

// 生命周期函数
onMounted(() => {
    //初始化列表数据
    initTableData()
})


// 获取数据
function initTableData(p = null) {
    //指定页码是否为空
    if (typeof p == "number") {
        currentPage.value = p
    }

    loading.value = true
    searchForm.page = currentPage.value

    api_cert_apply_list(searchForm)
        .then(res => {
            if (res) {
                tableData.value = res.records
                total.value = Number(res.total)
            } else {
                tableData.value = []
                total.value = 0
            }
        })
        .finally(() => {
            loading.value = false
        })
}

// 展示详情
function showDetails(row) {
    detailForm.value = row
    detailForm.value.srcList = [row.idPhoto]
    // console.log(JSON.stringify(detailForm.value))
    dialogTableVisible_apply.value = true
}

// 审核
function applyCert(row) {
    //证书模板 0：工程师证书 1公司证书
    auditForm.templateType = row.templateType
    auditForm.id = row.id
    // console.log(JSON.stringify(auditForm))
    dialogTableVisible_audit.value = true
}

// 提交审核
function submitApplyCert() {

    //如果审核通过，培训地点、所属区域，不能为空
    if (auditForm.auditState == "1") {
        if (null == auditForm.trainAddress || "" == auditForm.trainAddress) {
            toastWarn("培训地点不能为空")
            return
        }

        if (null == auditForm.certArea || "" == auditForm.certArea) {
            toastWarn("所属区域不能为空")
            return
        }

        if (auditForm.templateType == "1" || auditForm.templateType == 1) {
            if (null == auditForm.auditTechnical1 || "" == auditForm.auditTechnical1) {
                toastWarn("技能1不能为空")
                return
            }

            if (null == auditForm.auditTechnical2 || "" == auditForm.auditTechnical2) {
                toastWarn("技能2不能为空")
                return
            }
            if (null == auditForm.auditModels || "" == auditForm.auditModels) {
                toastWarn("证书类型不能为空")
                return
            }
        }
    }

    //如果审核不通过，驳回原因，不能为空
    if (auditForm.auditState == "2") {
        if (null == auditForm.auditRemark || "" == auditForm.auditRemark) {
            toastWarn("驳回原因不能为空")
            return
        }
    }

    api_cert_apply_audit(auditForm)
        .then(res => {
            toast("审批成功")
            initTableData()
        })
        .finally(() => {
            //重置表单数据
            auditForm.id = null
            auditForm.auditState = "1"
            auditForm.trainAddress = null
            auditForm.certArea = null
            auditForm.auditTechnical1 = null
            auditForm.auditTechnical2 = null
            auditForm.auditModels = null
            auditForm.auditRemark = null
            dialogTableVisible_audit.value = false
        })
}

// 状态转换
function changeState(val) {
    if (val == 0) {
        return "未审批"
    } else if (val == 1) {
        return "已通过"
    }
    return "未通过"
}
</script>

<style scoped>
.hide ::v-deep .el-upload--picture-card {
    display: none;
}

.el-form-item {
    margin-bottom: 10px;
}
</style>